ARIA

Die erste Regel der ARIA-Nutzung lautet: "Wenn Sie ein natives HTML-Element oder Attribut verwenden können, das bereits über die erforderlichen Semantiken und Verhaltensweisen verfügt, anstatt ein Element umzufunktionieren und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies."

Hier ist das Markup für ein Fortschrittsbalken-Widget:

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

Dieser Fortschrittsbalken wird mit einem <div> aufgebaut, das keine Bedeutung hat. Wir fügen ARIA-Rollen und -Eigenschaften hinzu, um Bedeutung zu verleihen. In diesem Beispiel informiert das role="progressbar"-Attribut den Browser, dass dieses Element tatsächlich ein JavaScript-gesteuertes Fortschrittsbalken-Widget ist. Die Attribute aria-valuemin und aria-valuemax geben die Minimal- und Maximalwerte für den Fortschrittsbalken an und aria-valuenow beschreibt den aktuellen Zustand, der daher mit JavaScript aktualisiert werden muss.

Neben dem direkten Platzieren im Markup können ARIA-Attribute dem Element hinzugefügt und dynamisch mit JavaScript-Code wie diesem aktualisiert werden:

// Find the progress bar <div> in the DOM.
const progressBar = document.getElementById("percent-loaded");

// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

Alle Inhalte, die für Benutzer ohne unterstützende Technologien verfügbar sind, müssen auch für unterstützende Technologien verfügbar gemacht werden. Ebenso sollten keine Funktionen enthalten sein, die sich ausschließlich an Benutzer von unterstützender Technologie richten, die nicht auch für Personen ohne diese Technologien zugänglich sind. Der obige Fortschrittsbalken muss gestylt werden, um wie ein Fortschrittsbalken auszusehen.

Es wäre viel einfacher gewesen, das native <progress>-Element zu verwenden:

<progress id="percent-loaded" value="75" max="100">75 %</progress>

Wie jede andere Webtechnologie gibt es verschiedene Unterstützungsgrade für ARIA. Die Unterstützung basiert auf dem verwendeten Betriebssystem und Browser sowie der Art der unterstützenden Technologie, die damit interagiert. Zusätzlich sind die Version des Betriebssystems, Browsers und der unterstützenden Technologie beitragende Faktoren. Ältere Softwareversionen unterstützen möglicherweise bestimmte ARIA-Rollen nicht, haben nur teilweise Unterstützung oder berichten fehlerhaft über deren Funktionalität.

Es ist auch wichtig anzuerkennen, dass einige Personen, die auf unterstützende Technologie angewiesen sind, ungern ihre Software aktualisieren, aus Angst, die Fähigkeit zur Interaktion mit ihrem Computer und Browser zu verlieren. Aus diesem Grund ist es wichtig, semantische HTML-Elemente zu verwenden, wann immer es möglich ist, da semantisches HTML eine weitaus bessere Unterstützung für unterstützende Technologien bietet.

Es ist auch wichtig, Ihr erstelltes ARIA mit tatsächlicher unterstützender Technologie zu testen. Der Grund dafür ist, dass Browser-Emulatoren und Simulatoren nicht wirklich effektiv sind, um vollständige Unterstützung zu testen. Ebenso sind Proxy-Lösungen für unterstützende Technologien nicht ausreichend, um die Funktionalität vollständig zu garantieren.

Die ARIA-Referenz ist eine umfassende Liste von ARIA-Attributen und -Rollen, die auf MDN dokumentiert sind.

ARIA-Rollen

ARIA-Rollen können verwendet werden, um Elemente zu beschreiben, die nativ nicht in HTML existieren oder solche, die existieren, aber noch keine breite Browserunterstützung haben.

ARIA-Zustände und Eigenschaften (Attribute)

ARIA-Attribute ermöglichen das Ändern von Zuständen und Eigenschaften eines Elements, wie im Zugänglichkeitsbaum definiert.

Die ARIA-Leitfäden und Anleitung-Seiten sind Ressourcen, die Ihnen helfen, die Zugänglichkeit von Webseitenfunktionen wie Tabellen, Formularen und Tastaturnavigation zu verbessern.

WAI-ARIA-Spezifikation

Die W3C-Spezifikation selbst.

WAI-ARIA-Autorenpraktiken

Die offiziellen Best-Practice-Dokumente, wie man häufige Widgets und Interaktionen am besten ARIA-fähig macht. Eine ausgezeichnete Ressource.

Schreiben von tastaturnavigierbaren JavaScript-Widgets

Eingebaute Elemente wie <input>, <button> usw. verfügen über eingebaute Tastaturzugänglichkeit. Wenn Sie diese mit <div>s und ARIA "fälschen", müssen Sie sicherstellen, dass Ihre Widgets tastaturzugänglich sind.

Live-Bereiche

Live-Bereiche bieten Bildschirmlesern Vorschläge, wie Änderungen an den Inhalten einer Seite behandelt werden sollen.

Die folgenden Vorträge sind eine großartige Möglichkeit, um ARIA zu verstehen:

ARIA, Accessibility APIs und Codieren, als ob es Ihnen wichtig wäre! – Léonie Watson